<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>订票</title>
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/yuding.css"/>
<script type="text/javascript">
    /*$(function (){
      //console.log(111111111111111111111111);
      //alert(location.href.split('?')[1]);
    })*/
    function $(id) {
        return document.getElementById(id);
    }

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }

    function moveElement(elementID, final_x, final_y, interval) {
        if (!document.getElementById) return false;
        if (!document.getElementById(elementID)) return false;
        var elem = document.getElementById(elementID);
        if (elem.movement) {
            clearTimeout(elem.movement);
        }
        if (!elem.style.left) {
            elem.style.left = "0px";
        }
        if (!elem.style.top) {
            elem.style.top = "0px";
        }
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        if (xpos == final_x && ypos == final_y) {
            return true;
        }
        if (xpos < final_x) {
            var dist = Math.ceil((final_x - xpos) / 10);
            xpos = xpos + dist;
        }
        if (xpos > final_x) {
            var dist = Math.ceil((xpos - final_x) / 10);
            xpos = xpos - dist;
        }
        if (ypos < final_y) {
            var dist = Math.ceil((final_y - ypos) / 10);
            ypos = ypos + dist;
        }
        if (ypos > final_y) {
            var dist = Math.ceil((ypos - final_y) / 10);
            ypos = ypos - dist;
        }
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
        elem.movement = setTimeout(repeat, interval);
    }

    function classNormal(iFocusBtnID, iFocusTxID) {
        var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
        var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
        for (var i = 0; i < iFocusBtns.length; i++) {
            iFocusBtns[i].className = 'normal';
            iFocusTxs[i].className = 'normal';
        }
    }

    function classCurrent(iFocusBtnID, iFocusTxID, n) {
        var iFocusBtns = $(iFocusBtnID).getElementsByTagName('li');
        var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
        iFocusBtns[n].className = 'current';
        iFocusTxs[n].className = 'current';
    }

    function iFocusChange() {
        if (!$('ifocus')) return false;
        $('ifocus').onmouseover = function () {
            atuokey = true
        };
        $('ifocus').onmouseout = function () {
            atuokey = false
        };
        var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
        var listLength = iFocusBtns.length;
        iFocusBtns[0].onmouseover = function () {
            moveElement('ifocus_piclist', 0, 0, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 0);
        }
        if (listLength >= 2) {
            iFocusBtns[1].onmouseover = function () {
                moveElement('ifocus_piclist', 0, -225, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 1);
            }
        }
        if (listLength >= 3) {
            iFocusBtns[2].onmouseover = function () {
                moveElement('ifocus_piclist', 0, -450, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 2);
            }
        }
        if (listLength >= 4) {
            iFocusBtns[3].onmouseover = function () {
                moveElement('ifocus_piclist', 0, -675, 5);
                classNormal('ifocus_btn', 'ifocus_tx');
                classCurrent('ifocus_btn', 'ifocus_tx', 3);
            }
        }
    }

    setInterval('autoiFocus()', 5000);
    var atuokey = false;

    function autoiFocus() {
        if (!$('ifocus')) return false;
        if (atuokey) return false;
        var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
        var listLength = focusBtnList.length;
        for (var i = 0; i < listLength; i++) {
            if (focusBtnList[i].className == 'current') var currentNum = i;
        }
        if (currentNum == 0 && listLength != 1) {
            moveElement('ifocus_piclist', 0, -225, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 1);
        }
        if (currentNum == 1 && listLength != 2) {
            moveElement('ifocus_piclist', 0, -450, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 2);
        }
        if (currentNum == 2 && listLength != 3) {
            moveElement('ifocus_piclist', 0, -675, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 3);
        }
        if (currentNum == 3) {
            moveElement('ifocus_piclist', 0, 0, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 0);
        }
        if (currentNum == 1 && listLength == 2) {
            moveElement('ifocus_piclist', 0, 0, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 0);
        }
        if (currentNum == 2 && listLength == 3) {
            moveElement('ifocus_piclist', 0, 0, 5);
            classNormal('ifocus_btn', 'ifocus_tx');
            classCurrent('ifocus_btn', 'ifocus_tx', 0);
        }
    }

    addLoadEvent(iFocusChange);
</script>
<script type="text/javascript">

    /*www.qpsh.com*/
    var aBgColor = ["#FFFFFF", "#f2faff", "#FFFFCC", "#FFFFCC"];

    function addTableListener(o, iHead, iEnd) {
        o.style.cursor = "normal";
        iHead = iHead > o.rows.length ? 0 : iHead;
        iEnd = iEnd > o.rows.length ? 0 : iEnd;
        for (var i = iHead; i < o.rows.length - iEnd; i++) {
            o.rows[i].onmouseover = function () {
                setTrBgColor(this, true)
            }
            o.rows[i].onmouseout = function () {
                setTrBgColor(this, false)
            }
        }
    }

    function setTrBgColor(oTr, b) {
        oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
    }

    window.onload = function () {
        // alert(1111);
        //alert(location.href.split('=')[1]);
        addTableListener(document.getElementById("tbColor"), 0, 0);
    }
    //-->
</script>
<body>
<div>
    <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
</div>
<div class="top">
    <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
</div>
<div class="menu">
    <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
</div>

<div id="app">
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a href="">首页</a> &gt;&nbsp;&nbsp;门票预订</div>
            <div class="yd_1200">
                <div class="detail_media_right" >
                    <h2 class="detail_media_title">{{scenics.name}}<span>{{scenics.levelCode}}</span></h2>
                    <ul class="detail_media_content">
                        <li class="w"><em>景点地址:</em>
                            <span>{{scenics.scenicAddress}}
                                <a data-targetid="jtzn" href="#" class="map_icon goToAnchor"><i></i>查看地图</a>
                            </span>
                        </li>
                        <li><em>营业时间:</em><span>{{scenics.businessHours}}<br>
            </span></li>
                        <li><em>乐乐价：</em><span><i class="price_ll">{{scenics.dprice}}</i>门市价：<i class="price_th">{{scenics.oprice}}</i></span></li>
<!--                        <li><a :href="'/html/front/yuding/dingdan.html?id='+scenics.id" class="yd_btn">现在预订</a></li>-->
                        <li><a @click="order()" class="yd_btn">加入收藏</a></li>
                    </ul>
                </div>
                <div>
                    <div id="ifocus">
                        <div id="ifocus_pic">
                            <div id="ifocus_piclist" style="left:0; top:0;">
                                <ul v-for=" pic in pics">
                                    <li><a href="" target="_blank"><img :src="pic.spic" alt=""/></a></li>
                                    <!--<li><a href="" target="_blank"><img src="images/02.jpg" alt=""/></a></li>
                                    <li><a href="" target="_blank"><img src="images/03.jpg" alt=""/></a></li>
                                    <li><a href="" target="_blank"><img src="images/04.jpg" alt=""/></a></li>-->
                                </ul>
                            </div>
                            <div id="ifocus_opdiv"></div>
                            <div id="ifocus_tx">
                                <ul v-for=" pic in pics">
                                    <li class="current">{{pic.summary}}</li>
                                    <!--<li class="normal"> 郑州方特欢乐园大门</li>
                                    <li class="normal"> 郑州方特欢乐园</li>
                                    <li class="normal"> 郑州方特欢乐园过山车</li>-->
                                </ul>
                            </div>
                        </div>
                        <div id="ifocus_btn">
                            <ul v-for=" pic in pics">
                                <li class="current"><img :src="pic.spic" alt=""/></li>
                                <!--<li class="normal"><img src="images/btn_02.jpg" alt=""/></li>
                                <li class="normal"><img src="images/btn_03.jpg" alt=""/></li>
                                <li class="normal"><img src="images/btn_04.jpg" alt=""/></li>-->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="yd_1200">
                <div class="ticket">
                    <ul>
                        <li class="ticket_on"><a href="#ticket_tab">门票</a></li>
                    </ul>
                </div>
                <div class="ticket_tab" id="ticket_tab">
                    <table width="1200" border="0" cellspacing="0" cellpadding="0" class="t_tab" id="tbColor">
                        <tr>
                            <td width="600" bgcolor="#F6F6F6"><strong>门票类型</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>门市价</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>乐乐价</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6"><strong>付款方式</strong></td>
                            <td width="150" align="center" bgcolor="#F6F6F6">&nbsp;</td>
                        </tr>
                        <!--<tr>
                            <td align="left"><a href="javascript:void(0)"
                                                onclick="document.getElementById('show').style.display=='none'?(document.getElementById('show').style.display='block'):(document.getElementById('show').style.display='none')	">[套票]郑州方特欢乐世界门票儿童票</a>
                            </td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yellow">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button onclick="location.href='yuding.html'">门票预订</button>
                            </td>
                        </tr>-->
                        <tr>
                            <td align="center" colspan="5" style=" border:none">
                                <div class="show" id="show" style="display: none;">
                                    <dl class="ticket_pro_list">
                                        <dt>费用包含</dt>
                                        <dd>郑州海洋馆学生票（大中专生、本科生、研究生），仅限大中专在校学生、本科生、研究生持学生证购学生票。</dd>
                                    </dl>
                                    <dl class="ticket_pro_list">
                                        <dt>兑换方式</dt>
                                        <dd>凭携程确认短信至指定地点付款取票；或供应商短信中的入园码或二维码到指定地点付款取票。</dd>
                                    </dl>
                                    <dl class="ticket_pro_list">
                                        <dt>重要条款</dt>
                                        <dd>1、退改规则：支持“随时退”。如需修改或取消您的订单，请登录“我的携程”订单管理界面进行相关操作，或致电携程：10106666*0。</dd>
                                        <dd>2、仅限于大中专在校学生、本科生、研究生持学生证购学生票。</dd>
                                    </dl>
                                    <i></i>
                                    <div class="pack_up"><a class="packup_btn" href="javascript:void(0)"
                                                            onclick="document.getElementById('show').style.display=='none'?(document.getElementById('show').style.display='block'):(document.getElementById('show').style.display='none')	">收起</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr v-for="ticket in tickets">
                            <td align="left">{{ticket.name}}</td>
                            <td align="center" class="linethrow">{{ticket.oprice}}</td>
                            <td align="center" class="yello">{{ticket.dprice}}</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>      <a :href="'/html/front/yuding/dingdan.html?id='+scenics.id" class="yd_btn">门票预订</a>
                               </button>
                            </td>
                        </tr>
                        <!--<tr>
                            <td align="left">[单票] 郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">[单票] 郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">[单票] 郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">郑州方特欢乐世界成人票</td>
                            <td align="center" class="linethrow">￥100</td>
                            <td align="center" class="yello">￥90</td>
                            <td align="center">网上支付</td>
                            <td align="center">
                                <button>门票预订</button>
                            </td>
                        </tr>-->
                    </table>
                </div>
            </div>
            <div class="yd_1200">
                <div class="yd_right">
                    <iframe scrolling="no" width="260" height="1120" frameborder="0"
                            src="zhoubiantuijian/zhoubian.html"></iframe>
                </div>
                <div class="tickettab"><span class="lkyd"><a href="dingdan.html">立刻预订</a></span>
                    <ul>
                        <li class="tickettab_on"><a href="#xuzhi">预订须知</a></li>
                        <li><a href="#jianjie">景区简介</a></li>
                        <li><a href="#jianjie">景区导游</a></li>
                        <li><a href="#zhinan">交通指南</a></li>
                    </ul>
                </div>
                <div class="w_tip" id="xuzhi">
                    <h3>预订须知</h3>
                    <ul>
                        <li>● 预约时需提供团购券券号及密码；预约成功后，如您未在预约时间入住，则团购券视为已使用；预约是否成功以商家的最终确认为准；由于商家单日接待能力有限，建议您尽可能更早提前预约。</li>
                        <li>●
                            成功购买团购券后，请按照指定期限预约指定房型，不设找赎，不可兑换现金，不可顺延；如未成团，则艺龙会将款项退还至您支付时使用的信用卡账户中，由于各信用卡开户行不同退款时间大约需要2-15个工作日。
                        </li>
                        <li>● 团购券购买数量不设限(酒店声明的特殊情况除外)。除非特别说明，可以在一家酒店连续使用多张团购券。请注意在预约时向酒店说明。</li>
                        <li>● 此价格不可与其他折扣或促销项目同时享用。</li>
                        <li>● 通常酒店的入住时间为14：00之后，离店时间为正午12：00之前。如提前入住或推迟离店，建议您直接与酒店联系确认入离时间，是否加收费用等。</li>
                        <li>● 每位入住酒店的宾客需携带有效身份证件方可办理入住登记。</li>
                        <li>● 团购券未包含的其他项目，如酒店餐饮、娱乐、酒水、加床、通讯及政府税金等其他费用需由入住人另行支付。</li>
                        <li>● 团购券号和密码如果忘记，可登录elong.com"我的账户"中"我的团购券"进行查询获取。</li>
                        <li>● 在法律允许的范围内，根据活动的进展情况艺龙旅行网可能对活动的规则/条款作出适当修改/调整。</li>
                        <li>● 本团购产品所示之销售数量为艺龙旅行网及其合作伙伴之销量总和。</li>
                    </ul>
                </div>
                <div class="w_tip" id="jianjie">
                    <h3>景区介绍</h3>
                    <p>{{scenics.summary}}</p>
                    <!--

                    <p>
                        郑州方特欢乐世界由飞越极限、恐龙危机、海螺湾、逃出恐龙岛、唐古拉雪山、暴风眼、极地快车、飞翔之歌、宇宙博览会、电影魔术大揭秘、生命之光、聊斋、嘟比历险等20多个大型主题项目区组成，涵盖主题项目、游乐项目、休闲及景观项目200多项。其中包括许多世界领先的超大型游乐项目，绝大多数项目老少皆宜。这里有国际一流的高空飞翔体验项目“飞越极限”；目前世界最先进的大型恐龙复活灾难体验项目“恐龙危机”；世界顶级的无压肩式圆环过山车“暴风眼”；亚洲仅有的巨型回旋式过山车“极地快车”；中国独创的大型雪山探险项目“唐古拉雪山”；中国原创的大型室内全彩led魔幻剧场“飞翔之歌”；让人琢磨不透的中国传统神话神奇演绎项目“聊斋”；色彩斑斓、如梦似幻的项目“海螺湾”；神奇的互动卡通脱口秀“十二生肖快乐街”......</p>
                    <p>
                        方特城堡：是大型儿童参与式体验项目。在这儿，您不仅能现场观看生动有趣的手偶剧表演，还能够亲身感受虚拟仿真、多媒体互动等妙趣横生的游艺技术、淘气堡、小滑梯、充气屋、卡通秀等玩乐设施装点成的童梦天地，更深得小朋友和家长们的喜爱。
                        宇宙博览会：地球人，注意啦！宇宙之王号令天下，众多星球期盼已久的首届宇宙博览会马上就要召开了，名额有限，快快到组委会报名吧！您将乘坐运动快车，体验到立体冲屏、4d特效互动技术，领略到最新的宇宙科技发展成果和各种新奇有趣的玩艺儿，感受科技发展带来的欢乐！</p>
                    <p><img src="images/01.jpg"/><img src="images/02.jpg"/></p>
                    <p>嘟比历险：是动感射击类游戏项目。乘坐载有发射装置的卡通游览车，行进在多角度，多方位的缤纷场景和奇异世界里，随乖巧可爱的小恐龙——嘟嘟嘟比与各种憨态可掬的小怪物们战斗，绝对是件酷毙了的事情。
                        唐古拉雪山：亿万年的冰雪随岁月流逝，形成了壮丽的高原奇景。极速的飞车沿轨道蜿蜒穿梭在陡峭的山峰，时而钻入山体中的岩浆通道，时而失去控制，从山崖冲出！一片片耀眼的银光浮现在眸前，巨大的轰鸣声在空气中不停回荡。大型雪山探险模拟项目——唐古拉雪山，让您体验急速跌落，弯转和翻滚带来的完美感受。

                        极地快车：集合战斗机特技动作，模拟飞行员身心体验，极地快车来自久负盛名的过山车生产国度——荷兰，是最经典的回旋式过山车之一。奇异的倒退提升，迅猛的极速俯冲，多次上下捻转颠倒……似鹰击长空，若剑指苍穹，令观者欢欣惊叹，能给坐着失重，离心状态下的惊险之乐。</p>
                --></div>
                <div class="w_tip" id="zhinan">
                    <h3>交通指南</h3>
                    <p><img src="images/bigmap.jpg"/></p>
                </div>
            </div>
            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>
</div>
<script>

    let scid = location.href.split('=')[1];

    let vue = new Vue({
        el: "#app",
        data() {
            return {
                id: '',//接收的id参数
                scenics: {},//记录拿到的景区
                tickets: [],//门票集合
                pics: [],//图片记录集合
            };
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            //调用加载数据方法
      //      alert(scid);
            this.select(scid);
        },
        mounted() {
            //接收参数并定义
            // let id = localStorage.getItem("id");
            this.id = location.href.split('=')[1]
            //调用函数初始化
            this.select()
            /*this.getImgList()*/
            /*this.getTicketsList()*/
        },

        methods: {
            select(id) {
                var _this = this;
                axios.get('/scenic/queryById?id=' + id
                )//请求参数
                    .then(function (response) {//回调函数
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.scenics = response.data.data;
                            /*console.log(_this.scenics);*/
                            _this.tickets = _this.scenics.ticketList;
                            _this.pics = _this.scenics.picList;
                            /*console.log(_this.tickets);*/
                            /*alert(_this.pics)*/
                            console.log(_this.pics);

                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });

            },
            //跳转主页
            reserve() {
                top.location.href = "/html/front/indexshiyan.html";
            },

            //跳转订单
            setOrder(orderId) {
                // localStorage.setItem("Scenic",JSON.stringify(Scenic));
                // let id = localStorage.getItem("id");
                top.location.href = "dingdan.html?orderId=" + orderId
                // localStorage.setItem("orderId",orderId);
                // let id = localStorage.getItem("id");
            },


            order() {
                let _this = this
                this.collect = {
                    "objcode": this.scenics.name,//景区名称
                    "objid": this.scenics.id,//景区id
                    "objname": this.scenics.saddress,
                    "favrid": this.scenics.id,
                }
                this.$confirm('确定将此景区加入收藏吗', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
               //     alert(JSON.stringify(_this.collect))
                    axios.post("/ptfavorite/add", _this.collect)
                    this.$message({
                        type: 'success',
                        message: '收藏成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消加入'
                    });
                });
                //使用axios向后台发请求




        }

        }
    });


</script>
</body>
</html>
